<!--能耗检测-->
<template>
    <div class="leftView">
        <div class="shrink" @click="shows=!shows"></div>
        <transition name="animationLR">
            <div v-show="shows" style="display: flex;flex-direction: column">
                <div class="container height273"
                     :style="{'background-image':`url(${require('@/assets/bg_left1.png')})`}">
                    <div class="container_title3">
                        <span>产业用电统计</span>
                    </div>
                    <div class="container_table">
                        <div class="container_table_header">
                            <div>企业名称</div>
                            <div>昨日用量</div>
                            <div>近7天用量</div>
                            <div>本月用量</div>
                            <div>本年用量</div>
                        </div>
                        <div class="container_table_subject userFlex" ref="tableContainer" @mouseenter="stopAutoScroll"
                             @mouseleave="startAutoScroll">
                            <div class="container_table_subject_line" v-for="(item,i) in tableList" :key="i">
                                <div>{{ item.name }}</div>
                                <div>{{ formattedYesterday(item.yesterday) }}</div>
                                <div>{{ formattedYesterdays(item.sevenDays) }}</div>
                                <div>{{ item.month }}</div>
                                <div>{{ item.year }}</div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="container height273"
                     :style="{'background-image':`url(${require('@/assets/bg_left1.png')})`}">
                    <div class="container_titleBox">
                        <div class="container_title1">
                            <span>用电趋势</span>
                        </div>
                        <div class="container_titleBox_dataBox">
                            <div :style="{'color':box.tab ===1?'#00E6FF':'#FFF'}" @click="handleDataOptionClick(1)">
                                日用
                            </div>
                            <div :style="{'color':box.tab ===2?'#00E6FF':'#FFF'}" @click="handleDataOptionClick(2)">
                                近7天
                            </div>
                            <div :style="{'color':box.tab ===3?'#00E6FF':'#FFF'}" @click="handleDataOptionClick(3)">
                                月用
                            </div>
                            <div :style="{'color':box.tab ===4?'#00E6FF':'#FFF'}" @click="handleDataOptionClick(4)">
                                近5年
                            </div>
                        </div>
                    </div>
                    <div v-show="box.tab === 1" class="container_lineBox" ref="yesterdayChart"></div>
                    <div v-show="box.tab === 2" class="container_lineBox" ref="sevenChart"></div>
                    <div v-show="box.tab === 3" class="container_lineBox" ref="monthChart"></div>
                    <div v-show="box.tab === 4" class="container_lineBox" ref="yearChart"></div>
                </div>
                <div class="container height273"
                     :style="{'background-image':`url(${require('@/assets/bg_left1.png')})`}">
                    <div class="container_title3">
                        <span>园区月度用电量对比</span>
                    </div>
                    <div class="container_lineBoxs" ref="quantityChart"></div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import * as echarts from "echarts";
import {getStatistics, getEnergy, getAnnual, getPower} from "@/api/consumption/axios";
import {getBaseList} from "@/api/synthesis/axios";

export default {
    name: "floatLeft",
    data() {
        return {
            scrollSpeed: 40, // 滚动速度，值越小滚动越块
            type: 1,
            box: {
                tab: 1,
            },
            electricityData: null,
            shows: true,
            dataOption: '日用', // 初始选择的数据选项
            chartInstance: null,
            //产业用电统计
            tableList: [],
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.init()
        })
        this.startAutoScroll()
    },
    watch: {
        type: function () {
            this.init()
        }
    },
    beforeDestroy() {
        this.stopAutoScroll(); // 组件销毁前停止滚动
    },
    methods: {
        init() {
            this.getEnergy()
            this.getStatistics()
            this.getComparison()
        },
        formattedYesterday(value) {
            // 使用toFixed方法保留三位小数
            return Number(value).toFixed(2);
        },
        formattedYesterdays(value) {
            // 使用toFixed方法保留三位小数
            return Number(value).toFixed(2);
        },
        stopAutoScroll() {
            clearInterval(this.scrollInterval);
        },
        // 鼠标离开事件处理程序，用于重新开始自动滚动
        startAutoScroll() {
            this.stopAutoScroll(); // 首先停止任何现有的滚动
            const container = this.$refs.tableContainer;
            const containerHeight = container.clientHeight;
            const contentHeight = container.scrollHeight;
            let scrollTop = 0;
            const scroll = () => {
                scrollTop += 1;
                if (scrollTop >= contentHeight) {
                    scrollTop = 0;
                }
                container.scrollTop = scrollTop;
            };
            this.scrollInterval = setInterval(scroll, this.scrollSpeed);
        },
        //园区月度用电量对比
        getComparison() {
            getPower().then(res => {
                console.log(res)
                if (res && res.value) {
                    this.initQuantity(res.value)
                    console.log(res.value, '企业年度用电量对比')
                }
            })
        },
        // 用电统计
        getStatistics() {
            let _this = this
            getStatistics().then(res => {
                console.log(res.value, "用电统计")
                _this.tableList = res.value.map(item => {
                    // 如果属性值是字符串，先转换为数字类型
                    item.month = parseFloat(item.month).toFixed(2);
                    item.year = parseFloat(item.year).toFixed(2);
                    return item;
                });


            }).catch(err => {
                console.log(err, "接口错误")
            })
        },
        //园区月度用电量对比
        initQuantity(powerData)  {
            const myEchart = echarts.init(this.$refs.quantityChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let dataArr = []; // 添加当前年份的数据（250为例）
            let lastYearDataArr = []; // 添加去年的数据
            let xData = []
            powerData.forEach(item => {
                dataArr.push(Number(item.theYearCount.toFixed(2))); // 将数据保留两位小数并添加到数组
                lastYearDataArr.push(Number(item.lastYearCount.toFixed(2))); // 将数据保留两位小数并添加到数组
                xData.push(`${item.month}月`);
            });
            console.log(dataArr, lastYearDataArr, xData, '园区月度用电量对比')
            option = {
                tooltip: {
                    trigger: "axis",
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        type: "shadow",
                    },
                },
                legend: {
                    data: ["今年用电", "去年用电"],
                    align: "left",
                    right: "20",
                    y: 15,
                    textStyle: {
                        fontSize: 10,
                        color: "#fff",
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    // itemGap: 10
                },
                grid: {
                    left: "1%",
                    right: "4%",
                    bottom: "1%",
                    top: "20%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: xData,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.60)",
                                width: 1,
                                type: "solid",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "rgba(255, 255, 255, 0.80)",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "单位（kw h）",
                        nameTextStyle: {
                            padding: [0, 0, 0, -30], // 上右下左
                            color: "rgba(255, 255, 255, 0.80)"
                        },
                        axisLabel: {
                            formatter: "{value} ",
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.80)",
                                width: 1,
                                type: "solid",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.60)",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "今年用电",
                        type: "bar",
                        data: dataArr,
                        barWidth: 5, //柱子宽度
                        barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(0, 230, 255, 1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 230, 255, 0)",
                                    },
                                ]),
                                opacity: 1,
                            },
                        },
                    },
                    {
                        name: "去年用电",
                        type: "bar",
                        data: lastYearDataArr,
                        barWidth: 5,
                        barGap: 1,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(255, 131, 46, 1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(255, 131, 46, 0)",
                                    },
                                ]),
                                opacity: 1,
                            },
                        },
                    },
                ],
            };
            myEchart.setOption(option);
        },
        //日用
        initYesterday(datas) {
            const myEchart = echarts.init(this.$refs.yesterdayChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            console.log(datas, '日用')
            let seriesData = [];
            let xData = [];
            datas.forEach(item => {
                xData.push(item.time);
                seriesData.push(Number(item.data.toFixed(2)));
            });
            option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)',
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        },
                    },
                },
                grid: {
                    top: '15%',
                    left: '15%',
                    right: '5%',
                    bottom: '15%',
                    // containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        show: false,
                        color: '#FFFFFF'
                    },

                    axisLabel: {
                        color: '#FFFFFF',
                        width: 100
                    },
                    splitLine: {
                        show: false
                    },
                    boundaryGap: false,
                    data: xData //this.$moment(data.times).format("HH-mm") ,

                }],

                yAxis: [{
                    type: 'value',
                    name: "单位(kw h)",
                    nameTextStyle: {
                        padding: [0, 0, 0, -40], // 上右下左
                        color: "rgba(255, 255, 255, 0.80)"
                    },
                    splitNumber: 4,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#FFFFFF',
                            opacity: 0.23
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        margin: 20,
                        textStyle: {
                            color: '#fff',

                        },
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [

                    {
                        name: '用电',
                        type: 'line',
                        showAllSymbol: true,
                        symbol: 'circle',
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: "rgba(98, 183, 255, 1)",
                            },
                        },
                        label: {
                            show: false,
                            position: 'top',
                            textStyle: {
                                color: '#2CABE3',
                            }
                        },
                        itemStyle: {
                            color: "#fff",
                            borderColor: "#2CABE3",
                            borderWidth: 0,
                        },

                        // data: seriesData //data.values
                        data:[964, 945, 1099, 1000, 1032, 1156, 930, 1080, 1120, 1045, 1122, 960, 1187, 975, 1056, 1120, 1198, 925, 1136, 809, 997, 1210, 830, 1023, 890]
                    },

                ]
            };
            myEchart.setOption(option);
        },
        //近七天
        initSevenDays(datas) {
            const myEchart = echarts.init(this.$refs.sevenChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let seriesData = [];
            let xData = [];
            datas.forEach(item => {
                xData.push(item.time);
                seriesData.push(Number(item.data.toFixed(2)));
            });
            option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)',
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        },
                    },
                },
                grid: {
                    top: '15%',
                    left: '16%',
                    right: '9%',
                    bottom: '15%',
                    // containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        show: false,
                        color: '#FFFFFF'
                    },

                    axisLabel: {
                        color: '#FFFFFF',
                        width: 100
                    },
                    splitLine: {
                        show: false
                    },
                    boundaryGap: false,
                    data: xData //this.$moment(data.times).format("HH-mm") ,

                }],

                yAxis: [{
                    type: 'value',
                    name: "单位(kw h)",
                    nameTextStyle: {
                        padding: [0, 0, 0, -60], // 上右下左
                        color: "rgba(255, 255, 255, 0.80)"
                    },
                    splitNumber: 4,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#FFFFFF',
                            opacity: 0.23
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        margin: 20,
                        textStyle: {
                            color: '#fff',

                        },
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [

                    {
                        name: '用电',
                        type: 'line',
                        showAllSymbol: true,
                        symbol: 'circle',
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: "rgba(98, 183, 255, 1)",
                            },
                        },
                        label: {
                            show: false,
                            position: 'top',
                            textStyle: {
                                color: '#2CABE3',
                            }
                        },
                        itemStyle: {
                            color: "#fff",
                            borderColor: "#2CABE3",
                            borderWidth: 0,
                        },

                        // data: seriesData //data.values
                        data:[33450, 34220, 33780, 34510, 33370, 33890, 34900]
                    },
                ]
            };
            myEchart.setOption(option);
        },
        //月
        initMonth(datas) {
            const myEchart = echarts.init(this.$refs.monthChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let seriesData = [];
            let xData = [];
            datas.forEach(item => {
                xData.push(item.time);
                seriesData.push(Number(item.data.toFixed(2)));
            });
            option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)',
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        },
                    },
                },
                grid: {
                    top: '15%',
                    left: '16%',
                    right: '8%',
                    bottom: '15%',
                    // containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        show: false,
                        color: '#FFFFFF'
                    },

                    axisLabel: {
                        color: '#FFFFFF',
                        width: 100
                    },
                    splitLine: {
                        show: false
                    },
                    boundaryGap: false,
                    data: xData //this.$moment(data.times).format("HH-mm") ,

                }],
                yAxis: [{
                    type: 'value',
                    name: "单位(kw h)",
                    nameTextStyle: {
                        padding: [0, 0, 0, -60], // 上右下左
                        color: "rgba(255, 255, 255, 0.80)"
                    },
                    splitNumber: 4,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#FFFFFF',
                            opacity: 0.23
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        margin: 20,
                        textStyle: {
                            color: '#fff',

                        },
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [

                    {
                        name: '用电',
                        type: 'line',
                        showAllSymbol: true,
                        symbol: 'circle',
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: "rgba(98, 183, 255, 1)",
                            },
                        },
                        label: {
                            show: false,
                            position: 'top',
                            textStyle: {
                                color: '#2CABE3',
                            }
                        },
                        itemStyle: {
                            color: "#fff",
                            borderColor: "#2CABE3",
                            borderWidth: 0,
                        },

                        // data: seriesData //data.values
                        data: [11520, 11230, 10780, 12450, 10960, 11890, 10560, 12310, 11940, 10170, 12780, 11390, 10670, 12540, 11750, 10350, 12080, 11040, 12860, 10240, 12670, 10820, 11470, 12190, 11610, 11150, 12950, 10480, 10090, 12230, 12700] //data.values
                    },
                ]
            };
            myEchart.setOption(option);
        },
        //近五年
        initYear(datas) {
            const myEchart = echarts.init(this.$refs.yearChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let seriesData = [];
            let xData = [];
            datas.forEach(item => {
                xData.push(item.time);
                seriesData.push(Number(item.data.toFixed(2)));
            });
            option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)',
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        },
                    },
                },
                grid: {
                    top: '15%',
                    left: '21%',
                    right: '5%',
                    bottom: '15%',
                    // containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        show: false,
                        color: '#FFFFFF'
                    },

                    axisLabel: {
                        color: '#FFFFFF',
                        width: 100
                    },
                    splitLine: {
                        show: false
                    },
                    boundaryGap: false,
                    data: xData //this.$moment(data.times).format("HH-mm") ,

                }],
                yAxis: [{
                    type: 'value',
                    name: "单位(kw h)",
                    nameTextStyle: {
                        padding: [0, 0, 0, -100], // 上右下左
                        color: "rgba(255, 255, 255, 0.80)"
                    },
                    splitNumber: 4,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#FFFFFF',
                            opacity: 0.23
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        margin: 20,
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [
                    {
                        name: '用电',
                        type: 'line',
                        showAllSymbol: true,
                        symbol: 'circle',
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: "rgba(98, 183, 255, 1)",
                            },
                        },
                        label: {
                            show: false,
                            position: 'top',
                            textStyle: {
                                color: '#2CABE3',
                            }
                        },
                        itemStyle: {
                            color: "#fff",
                            borderColor: "#2CABE3",
                            borderWidth: 0,
                        },

                        // data: seriesData
                        data: [0, 0, 0, 0, 10560000] //data.values
                    },
                ]
            };
            myEchart.setOption(option);
        },
        // 电耗趋势
        getEnergy() {
            let _this = this
            var params = {
                'type': _this.type
            }
            getEnergy(params).then(res => {
                if (_this.type === 1) {
                    _this.initYesterday(res.value)
                    console.log(res.value, '电量1')
                } else if (_this.type === 2) {
                    _this.initSevenDays(res.value)
                    console.log(res.value, '电量2')
                } else if (_this.type === 3) {
                    _this.initMonth(res.value)
                    console.log(res.value, '电量3')
                } else if (_this.type === 4) {
                    _this.initYear(res.value)
                    console.log(res.value, '电量4')
                }

                // _this.initElectricity(res.value);
                // console.log(_this.box.tab, "type类型1")
            }).catch(err => {
                console.log(err, "接口错误")
            })
        },

        handleDataOptionClick(option) {
            this.type = option;
            this.box.tab = option
            console.log(this.type, 'type类型2')
            //日用
            this.initYesterday()
            //近七天
            this.initSevenDays()
            //月
            this.initMonth()
            //近五年
            this.initYear()
        },
    },

}
</script>


<style lang="scss">
.height230 {
  width: 280px;
  height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .height230 {
    height: calHeight_2k(230px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.active {
  color: #00E6FF;

}

.minHeight12 {
  min-height: 12px;
  margin-bottom: 5px;
}

.height294 {
  width: 450px;
  height: 294px;
}

.height273 {
  width: 450px;
  height: 203px;
}


.leftView {
  float: left;
  display: flex;
  flex-direction: row;
  height: 630px;
  margin-top: 40px;
  align-items: center;
  position: relative;
  z-index: 3;
  cursor: pointer;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink.png");
  }

  .container {
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;

    &-titleBgc {
      width: 400px;
      height: 3px;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &_table {
      width: 400px;
      height: 143px;
      margin-top: 10px;
      margin-left: 22px;
      font-size: 14px;
      font-family: Noto Sans SC-Medium, Noto Sans SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);

      &_header {
        width: 100%;
        height: 20px;
        background: rgba(98, 183, 255, 0.2);
        display: flex;
        justify-content: space-between;
        text-align: center;
        line-height: 20px;

        div {
          width: 20%;
        }
      }

      &_loadBox {
        width: 100%;
        height: 120px;
        font-size: 15px;
        color: #9e9e9e;
        line-height: 120px;
        text-align: center;
      }

      &_subject {
        width: 100%;
        height: 120px;

        &_line {
          width: 100%;
          height: 15px;
          margin-top: 10px;
          //margin-bottom: 8px;
          line-height: 15px;
          display: flex;
          justify-content: space-between;
          text-align: center;

          div {
            width: 20%;
            overflow: hidden;
          }
        }
      }
    }

    &_titleBox {
      width: 388px;
      height: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      margin-left: 20px;
      margin-bottom: 5px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title3.png");

      &_dataBox {
        width: 216px;
        height: 20px;
        line-height: 20px;
        color: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: space-between;
        cursor: pointer;
      }

      &_title1 {
        width: 216px;
        height: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;

        span {
          height: 20px;
          font-size: 13px;
          font-family: Source Han Sans SC;
          font-weight: bold;
          color: #ffffff;
          line-height: 20px;
          background: linear-gradient(0deg, #90ccff 0%, #fafafb 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    &_lineBox {
      width: 400px;
      height: 153px;
      margin-left: 22px;
    }

    &_lineBoxs {
      width: 400px;
      height: 153px;
      margin-left: 22px;
    }

    &-listBox {
      width: 336px;
      height: 58px;
      margin-left: 22px;
      margin-top: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-bayonetBox {
        width: 131px;
        height: 58px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-bayonetIcon {
          width: 58px;
          height: 58px;
          background-size: 100% 100%;
          background-image: url("@/assets/icon_bayonet.png");
        }

        &-monitorinIcon {
          width: 58px;
          height: 58px;
          background-size: 100% 100%;
          background-image: url("@/assets/icon_monitoring.png");
        }

        &-dataFont {
          font-size: 22px;
          font-family: D-DIN-DIN-Bold, D-DIN-DIN;
          font-weight: bold;
          background: linear-gradient(180deg, #FFFFFF 19%, #23A5F7 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        &-textFont {
          font-size: 14px;
          font-family: Noto Sans SC-Regular, Noto Sans SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.8);
        }
      }

    }

    &-line {
      width: 400px;
      height: 3px;
      margin-left: 22px;
      margin-top: 10px;
      margin-bottom: 9px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_fenge.png");
    }

    &-vehicleChat {
      width: 400px;
      height: 147px;
      margin-left: 22px;
    }

    &_title1 {
      height: 24px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 10px;

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 24px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_title3 {
      width: 388px;
      height: 24px;
      margin-top: 15px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 20px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title3.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_policy {
      width: 222px;
      height: 52px;
      padding-left: 10px;
      margin-top: 8px;
      margin-left: 22px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_policy.png");

      &_name {
        height: 15px;
        font-size: 9px;
        overflow: hidden; /*超出部分隐藏*/
        text-overflow: ellipsis; /*超出部分省略号表示*/
        white-space: nowrap; /*强制单行显示*/
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #1CFDFF;
        line-height: 15px;
      }

      &_types {
        display: flex;;
        flex-direction: row;
        min-height: 12px;
      }

      &_type {
        margin-bottom: 5px;
        width: 48px;
        display: block;
        height: 12px;
        margin-right: 5px;
        font-size: 7px;
        text-align: center;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 12px;
      }

      &_bg1 {
        background: linear-gradient(270deg, rgba(226, 80, 63), rgba(231, 10, 91));
      }

      &_num {
        height: 6px;
        font-size: 6px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 6px;
      }
    }
  }
}

.industrialChainStyle {
  margin-left: 5%;
  width: 90%;
  height: 240px;
}

.industryStyle {
  width: 100%;
  height: 224px;
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .minHeight12 {
    min-height: calHeight_2k(12px);
    margin-bottom: calHeight_2k(5px);
  }

  .height294 {
    height: calHeight_2k(294px);
  }

  .height273 {
    height: calHeight_2k(203px);
  }


  .leftView {
    //margin-top: calHeight_2k(20px);
    height: calHeight_2k(630px);

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {
      &-titleBgc {
        height: calHeight_2k(3px);
      }

      &_table {
        height: calHeight_2k(143px);
        margin-top: calHeight_2k(10px);

        &_header {
          height: calHeight_2k(20px);
          line-height: calHeight_2k(20px);
        }

        &_loadBox {
          height: calHeight_2k(120px);
          line-height: calHeight_2k(120px);
        }

        &_subject {
          height: calHeight_2k(120px);

          &_line {
            height: calHeight_2k(15px);
            margin-top: calHeight_2k(10px);
            //margin-bottom: calHeight_2k(8px);
            line-height: calHeight_2k(15px);
          }
        }
      }

      &_titleBox {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(15px);
        margin-bottom: calHeight_2k(5px);

        &_dataBox {
          height: calHeight_2k(20px);
          line-height: calHeight_2k(20px);
        }

        &_title1 {
          height: calHeight_2k(20px);

          span {
            height: calHeight_2k(20px);
            line-height: calHeight_2k(20px);
          }

        }
      }

      &_lineBox {
        height: calHeight_2k(153px);
      }

      &_lineBoxs {
        height: calHeight_2k(153px);
      }

      &-listBox {
        height: calHeight_2k(58px);
        margin-top: calHeight_2k(14px);

        &-bayonetBox {
          height: calHeight_2k(58px);
        }
      }

      &-line {
        margin-top: calHeight_2k(10px);
        margin-bottom: calHeight_2k(9px);
      }

      &-vehicleChat {
        height: calHeight_2k(147px);
      }


      &_title3 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(15px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      &_policy {
        height: calHeight_2k(52px);
        margin-top: calHeight_2k(8px);

        &_name {
          height: calHeight_2k(15px);
          line-height: calHeight_2k(15px);
        }

        &_types {
          min-height: calHeight_2k(12px);
        }

        &_type {
          width: calHeight_2k(48px);
          margin-bottom: calHeight_2k(5px);
          height: calHeight_2k(12px);
          line-height: calHeight_2k(12px);
        }

        &_bg1 {
        }

        &_num {
          height: calHeight_2k(6px);
          line-height: calHeight_2k(6px);
        }
      }
    }
  }

  .industrialChainStyle {
    height: calHeight_2k(240px);
  }

  .industryStyle {
    height: calHeight_2k(224px);
  }
}
</style>
